<div id="navbar" class="main-slide col-12 col-lg-1 col-sm-3 col-md-2 px-0 nav-box">
  <div class="left-nav-wrapper">
    <div style="color: white; padding-top: 10px; text-align: center; line-height: 1.2" >
      <a href="/index" style="display: inline-block;">
        <div style="color: white; line-height: 1.2; font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;">
          <div style="font-size: 20px;  letter-spacing: 2px; text-shadow: 0 2px 4px rgba(0,0,0,0.5);">{$jcname}</div>
          <div style="font-size: 11px; margin-top: 8px; letter-spacing: 2px; text-shadow: 0 2px 4px rgba(0,0,0,0.5);">{$tjzxname}</div>
        </div>
      </a>

    </div>
<!--    <img class="compony_icon" width="65%" src="/images/news/index/logo.png" alt="" onclick="window.location.href='/'" />-->
    <ul class="slide-nav">
      {foreach from=$userMenu key=key item=item1}
        {if  $key!='工作主页'}
          <li class="nav-item slide-dropdown {if in_array($controllerName,$item1['controller'])}nav-item-active{/if}">
            <a href="javascript:;" class="nav-link dropdown-toggle">
              <span class="nav-icon glyphicon {$item1['icon']}" aria-hidden="true"></span>
              <i>{$item1['c_name']}</i>
              <div class="nav-arrow-down glyphicon glyphicon-menu-down"></div>
              <div class="nav-arrow-up glyphicon glyphicon-menu-up"></div>
            </a>
            <div class="slide-dropdown-menu">
              {foreach from=$item1['data'] item=item}
                {if $item['is_hide']==0}
                  <a href="/{$item.controller}{if $item.action !== 'index'}/{$item.action}{/if}" class="dropdown-item {if $parent_name=={$item.name}}dropdown-item-active{/if}">{$item.name}</a>
                {/if}
              {/foreach}
            </div>
          </li>
        {/if}
      {/foreach}
    </ul>
    <!-- <img class="compony_frame" src="/images/news/index/frame.png" alt="" /> -->
  </div>
</div>
<style>
    @import '/css/math/math.scss';
    .nav-hide{
        display: none;
    }
    .nav-box{
      width: 170px;
      height: 100vh;
    }
    .simple{
        width: 64px !important;
        transition:0.4s ease-in;
    }
    .simple .nav-link{
        display: flex;
        align-items: center;
    }
    .simple .nav-link>*{
        display: none;
    }
    .simple .nav-link>.nav-icon{
        display: block;
    }
    .simple .slide-dropdown-menu{
        display: none;
    }
    .compony_icon {
      margin: 17px 32px 5px;
    }
    .left-nav-wrapper {
      width: 100%;
      height: 100%;
      position: relative;
    }
    .compony_frame {
      position: absolute;
      left: -60px;
      bottom: -50px;
      z-index: 1;
    }
    .slide-nav {
      z-index: 2;
    }
</style>
<script>
    function setMainBoxWidth(){
        let navWidth=$('.nav-box').width()+'px';
        $('.main-box').css('width','calc(100% - '+navWidth+')');
    }
    $('body')
    .on('click','[data-fn="left"]',function(){
        $('.nav-box').addClass('simple');
        $('.dropdown-item-active').parents('.nav-item').find('.nav-link').addClass('dropdown-item-active');
        setTimeout(()=>{
            $(this).addClass('nav-hide');
            $('[data-fn="right"]').removeClass('nav-hide');
            setMainBoxWidth();
        },400)
    })
    .on('click','[data-fn="right"]',function(){
        $('.nav-box').removeClass('simple');
        $('.nav-link').removeClass('dropdown-item-active');
        setMainBoxWidth();
        $(this).addClass('nav-hide');
        $('[data-fn="left"]').removeClass('nav-hide');
    })
    .on('click', '.nav-item', function() {
      $('.nav-item').removeClass('nav-item-active');
      $('.nav-item .slide-dropdown-menu').css('display', 'none');
      $('.nav-item .nav-link .nav-arrow-down').css('display', 'block');
      $('.nav-item .nav-link .nav-arrow-up').css('display', 'none');
      $(this).addClass('nav-item-active');
      $(this).children('.slide-dropdown-menu').css('display', 'block');
      $(this).children('.nav-link').children('.nav-arrow-down').css('display', 'none');
      $(this).children('.nav-link').children('.nav-arrow-up').css('display', 'block');
    })
</script>
